<script setup>
import ElCardBg from '@/components/ElCardBg.vue';
import { nextTick, ref, onMounted } from 'vue'
import { ElInput, ElMessage } from 'element-plus'
import { getAboutMe, updateAboutMe, delTechology, addTechnology } from '@/api/about'
const formData = ref({
  time: '',
  school: '',
  major: '',
  technology: [],
  experience: '',
  chicken: ''
})
// 获取数据
const getAboutMeData = async () => {
  const res = await getAboutMe()
  formData.value = res.data
}
onMounted(() => {
  getAboutMeData()
})

const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref()

// 删除技术栈
const handleClose = async (id) => {
  // 渲染视图
  await delTechology(id)
  ElMessage.success("删除成功!")
  getAboutMeData()
}

// 显示输入框
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value.input.focus()
  })
}

// 处理输入后的数据
const handleInputConfirm = async () => {
  console.log(inputValue.value);
  if (inputValue.value.trim('') === '') {
    inputVisible.value = false
    return
  }
  // 发送添加请求
  await addTechnology(inputValue.value)
  getAboutMeData()
  ElMessage.success("添加成功!")
  inputVisible.value = false
  inputValue.value = ''
}

// 修改
const onUpdate = async () => {
  await updateAboutMe(formData.value)
  ElMessage.success("修改成功!")
}
</script>

<template>
  <ElCardBg :title="'关于我'">
    <template v-slot:content>
      <div class="div-form" style="margin-left: 18px">
        <el-form-item label="时间:">
          <el-input placeholder="" style="width: 200px;" v-model="formData.time"></el-input>
        </el-form-item>
        <el-form-item label="学校:">
          <el-input placeholder="" style="width: 200px;" v-model="formData.school"></el-input>
        </el-form-item>
        <el-form-item label="专业:">
          <el-input placeholder="" style="width: 200px;" v-model="formData.major"></el-input>
        </el-form-item>
        <el-form-item label="技术:">
          <el-tag v-for="tag in formData.technology" :key="tag.id" style="margin-right: 10px;width: 80px;" closable
            :disable-transitions="false" @close="handleClose(tag.id)">
            {{ tag.name }}
          </el-tag>
          <el-input v-if="inputVisible" ref="InputRef" style="width: 100px" v-model="inputValue" class="w-20"
            size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">
            + New Tag
          </el-button>
        </el-form-item>
        <el-form-item label="经历:" style="margin-top: 20px;">
          <el-input placeholder="" type="textarea" :rows="11" style="width: 700px;"
            v-model="formData.experience"></el-input>
        </el-form-item>
        <el-form-item label="鸡汤:">
          <el-input placeholder="" type="textarea" :rows="3" style="width: 700px;"
            v-model="formData.chicken"></el-input>
        </el-form-item>
        <el-form-item label="" label-width="610px" style="margin-top: 15px;">
          <el-button type="primary" plain @click="onUpdate" v-permissionDirective>修改</el-button>
          <el-button type="warning" plain @click="getAboutMeData">重置</el-button>
        </el-form-item>
      </div>
    </template>
  </ElCardBg>
</template>

<style lang="scss" scoped></style>
